<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>滚动页面功能示例</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            margin: 0;  
            padding: 0;  
            height: 2000px;  
        }  
        .sidebar {  
            position: fixed;  
            top: 50%;  
            right: 0;  
            width: 50px;  
            height: 100px;  
            background-color: #333;  
            color: white;  
            text-align: center;  
            line-height: 100px;  
            transform: translateY(-50%);  
            display: none; /* 初始隐藏 */  
            cursor: pointer;  
        }  
        .sidebar.visible {  
            display: block; 
        }  
        #backToTop {  
            position: fixed;  
            bottom: 30px;  
            right: 30px;  
            display: none; 
            background-color: #007BFF;  
            color: white;  
            padding: 10px 20px;  
            border: none;  
            border-radius: 5px;  
            cursor: pointer;  
        }  
    </style>  
</head>  
<body>  
    <div class="sidebar" id="sidebar">  
        ↑  
    </div>  
    <button id="backToTop">返回顶部</button>  
  
    <script>  
        const sidebar = document.getElementById('sidebar');  
        const backToTopBtn = document.getElementById('backToTop');  
  
        window.addEventListener('scroll', () => {  
            if (window.scrollY > 300) {  
                sidebar.classList.add('visible');  
                backToTopBtn.style.display = 'block';  
            } else {  
                sidebar.classList.remove('visible');  
                backToTopBtn.style.display = 'none';  
            }  
        });  
  
        backToTopBtn.addEventListener('click', () => {  
            window.scrollTo({  
                top: 0,  
                behavior: 'smooth' 
            });  
        });  
  
        sidebar.addEventListener('click', () => {  
            window.scrollTo({  
                top: 0,  
                behavior: 'smooth'  
            });  
        });  
    </script>  
</body>  
</html>